<template>
  <n-scrollbar style="max-height: 80vh" class="box">
    <n-space vertical v-if="list.length > 0">
      <n-card
        hoverable
        class="card relative"
        v-for="item in list"
        :key="item.id"
      >
        <n-badge
          value="new"
          dot
          class="!absolute right-1 top-1"
          v-show="!item.isRead"
        />
        <!-- 关注学者 -->
        <div v-if="item.type == 0" class="flex items-center justify-between">
          <div class="text flex items-center">
            <n-tag type="info" class="mr-3">学者</n-tag>
            <div class="flex flex-col gap-1">
              <div>
                你关注的学者
                <span class="underline italic underline-offset-4"
                  >{{ item.updateName }}
                </span>
                有新进展！
                <n-text
                  class="cursor-pointer ml-2"
                  type="primary"
                  @click="handleUserClick(item)"
                >
                  {{ ' >>> 前往查看' }}
                </n-text>
              </div>
            </div>
          </div>
          <div>
            <n-time :time="new Date(item.time)" type="relative"></n-time>
          </div>
        </div>
        <!-- 关注问题 -->
        <div
          v-else-if="item.type == 1"
          class="flex items-center justify-between"
        >
          <div class="text flex items-center">
            <n-tag type="success" class="mr-3">问题</n-tag>
            <div class="flex flex-col gap-1">
              <div>
                你关注的
                <span class="underline italic underline-offset-4"
                  >{{ item.updateName }}
                </span>
                问题更新了!
                <n-text
                  class="cursor-pointer ml-2"
                  type="primary"
                  @click="handleHelpClick(item)"
                >
                  {{ ' >>> 前往查看' }}
                </n-text>
              </div>
            </div>
          </div>
          <div>
            <n-time :time="new Date(item.time)" type="relative"></n-time>
          </div>
        </div>
        <!-- 项目申请 -->
        <div v-else class="flex items-center justify-between">
          <div class="text flex items-center">
            <n-tag type="warning" class="mr-3">项目</n-tag>
            <div class="flex flex-col gap-1">
              <div>
                你的项目
                <span class="underline italic underline-offset-4"
                  >{{ item.updateName }}
                </span>
                收到了加入申请
              </div>
              <div>
                <span class="font-normal">
                  &nbsp;&nbsp;
                  <span
                    class="cursor-pointer font-bold"
                    @click="openWindow('/profile/' + item.applyId)"
                    >{{ item.applyName }}</span
                  >
                  希望能与你一起合作</span
                >
                <!-- <n-text
                  class="cursor-pointer ml-2"
                  type="primary"
                  @click="handleProjectClick(item)"
                >
                  {{ ' >>> 前往查看' }}
                </n-text> -->

                &nbsp;&nbsp;
                <template v-if="!item.isRead">
                  <n-button
                    type="success"
                    size="small"
                    ghost
                    @click="handleProjectClick(item, 1)"
                  >
                    同意
                  </n-button>
                  &nbsp;&nbsp;
                  <n-button
                    type="error"
                    size="small"
                    ghost
                    @click="handleProjectClick(item, 0)"
                  >
                    拒绝
                  </n-button>
                </template>
                <n-tag v-else size="small"> 已处理</n-tag>
              </div>
            </div>
          </div>
          <div>
            <n-time :time="new Date(item.time)" type="relative"></n-time>
          </div>
        </div>
      </n-card>
    </n-space>
    <div class="blank" v-else>
      <img class="img" src="@assets/404.png" alt="" />
    </div>
  </n-scrollbar>
</template>

<script setup>
import api from '@/api/api'
const { Message, Project } = api

const router = useRouter()
const list = ref([
  // {
  //   name: 'zy',
  //   type: 0,
  //   id: 1,
  //   time: '2020年1月2日',
  //   updateName: 'ad',
  //   updateId: 1,
  // },
  // {
  //   name: 'zy',
  //   type: 1,
  //   id: 1,
  //   time: '2020年1月2日',
  //   updateName: 'ad',
  //   updateId: 1,
  // },
])

const getNoticeList = () => {
  Message.getNoticeList({
    type: 'follow'
  }).then((res) => {
    if (res.success) {
      list.value = res.list
      // list.value.push({
      //   id: '54',
      //   isRead: false,
      //   name: '除就易满华你',
      //   time: '1975-10-19 11:50:53',
      //   type: 4,
      //   updateId: '32',
      //   updateName: '色列何共相可',
      //   applyName: '列这斯又山',
      //   applyId: '64'
      // })
      list.value.sort((a, b) => {
        return a.isRead - b.isRead
      })
    }
  })
}
onMounted(() => {
  getNoticeList()
})

const markAsRead = (id) => {
  list.value.find((item) => item.id === id).isRead = true
  Message.read({
    id
  }).then((res) => {
    if (res.success) {
      getNoticeList()
    }
  })
}

const handleUserClick = (item) => {
  markAsRead(item.id)
  window.open(`/profile/${item.updateId}`)
}
const handleHelpClick = (item) => {
  markAsRead(item.id)
  window.open('/forum/detail/' + item.updateId + '#comment')
}
const handleProjectClick = (item, type) => {
  Project.decideProject({ pid: item.updateId, aid: item.applyId, type }).then(
    (res) => {
      if (res.success) {
        markAsRead(item.id)
      } else {
        message.error('消息处理失败，请重试')
      }
    }
  )
}

const openWindow = (url) => {
  window.open(url, '_blank')
}
</script>

<style scoped lang="scss">
.box {
  text-align: right;
}
.card {
  position: relative;
  min-height: 60px;
}
.text {
  font-weight: bold;
}
.image {
  position: absolute;
  right: 30px;
  transform: translate(0, -50%);
  top: 50%;
}
.blank {
  text-align: center;
  .img {
    display: block;
    margin: 0 auto;
    height: 20vh;
  }
}
</style>
